<div class="login">
  <canvas id="login-canvas"></canvas>
  <div class="login-box">
    <h1 class="login-box-header">
      <a href="#">
        <img src="https://gw.alipayobjects.com/zos/rmsportal/NGCCBOENpgTXpBWUIPnI.svg">
        <span>后台管理系统</span>
      </a>
    </h1>
    <div class="login-box-nav">
      <nz-tabset>
        <nz-tab *ngFor="let tab of tabs"> 
          <ng-template #nzTabHeading>
            {{tab.name}}
          </ng-template>
          <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="_submitForm()">
            <div nz-form-item>
              <div nz-form-control [nzValidateStatus]="validateForm.controls.userName">
                <nz-input formControlName="userName" [nzPlaceHolder]="tab.placeholder" [nzSize]="'large'">
                  <ng-template #prefix>
                    <i [(ngClass)]="tab.class"></i>
                  </ng-template>
                </nz-input>
                <div nz-form-explain *ngIf="validateForm.controls.userName.dirty&&validateForm.controls.userName.hasError('required')">Please input your username!</div>
              </div>
            </div>
            <div nz-form-item>
              <div nz-form-control [nzValidateStatus]="validateForm.controls.password">
                <nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'密码'" [nzSize]="'large'">
                  <ng-template #prefix>
                    <i class="anticon anticon-lock"></i>
                  </ng-template>
                </nz-input>
                <div nz-form-explain *ngIf="validateForm.controls.password.dirty&&validateForm.controls.password.hasError('required')">Please input your Password!</div>
              </div>
            </div>
            <div nz-form-item>
              <div nz-form-control>
                <button nz-button class="login-form-button" [nzType]="'primary'" [nzSize]="'large'">登录</button>
              </div>
            </div>
          </form>
        </nz-tab>
      </nz-tabset>
    </div>
  </div>
</div>